<demo>
    常规用法
</demo>

<template>
  <div>
    <Button @click="toggle">打开对话框</Button>
    <Dialog v-model:visible="x" :closeOnClickOverlay="false" :ok="f1" :cancel="f2" title="您好">
      <template v-slot:title>
        <div>提示</div>
      </template>
      <template v-slot:content>
        <div>你好</div>
        <div>hi</div>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">

  import { ref } from 'vue'

  import Dialog from '../../lib/Dialog.vue'
  import Button from '../../lib/Button.vue'

  export default {
    components: { 
      Dialog, 
      Button 
    },
    setup() {
      const x = ref(false);
      const toggle = () => {
        x.value = !x.value;
      }
      const f1 = () => {}
      const f2 = () => {}
      return { x, toggle, f1, f2 }
    }
  }
</script>